//首页
<template>
    <view class="container">
        <!-- 开发时碰到 ui 相关问题参考：https://uniapp.dcloud.net.cn/component/uniui/uni-ui.html -->


        <!-- 		<uni-card>背单词首页</uni-card>
		<view class="intro">本项目已包含uni ui组件，无需import和注册，可直接使用。在代码区键入字母u，即可通过代码助手列出所有可用组件。光标置于组件名称处按F1，即可查看组件文档。</view>
		<text class="intro">详见：22222</text>
		<uni-link :href="href" :text="href"></uni-link>
		
		<view>睇下我 睇下我</view> -->


       <view class="statistics">
            <view class="countItem">
				<view class="countCircle">
					{{countInfo.forget}}
				</view>
				<text>遗忘单词</text>
			</view>
			<view class="countItem">
				<view class="countCircle">
					{{countInfo.num1}}
				</view>
				<text>复习1次</text>
			</view>
			<view class="countItem">
				<view class="countCircle">
					{{countInfo.num2}}
				</view>
				<text>复习2次</text>
			</view>
			<view class="countItem">
				<view class="countCircle">
					{{countInfo.num3}}
				</view>
				<text>复习3次</text>
			</view>
			<view class="countItem">
				<view class="countCircle">
					{{countInfo.num4}}
				</view>
				<text>复习4次</text>
			</view>
			<view class="countItem">
				<view class="countCircle">
					{{countInfo.num5}}
				</view>
				<text>复习5次</text>
			</view>
			<view class="countItem">
				<view class="countCircle">
					{{countInfo.num6}}
				</view>
				<text>复习6次</text>
			</view>
			<view class="countItem">
				<view class="countCircle">
					{{countInfo.known}}
				</view>
				<text>已学会</text>
			</view>
        </view>
		
<!-- 		<view class="">
			{{countInfo.forget}}
			{{countInfo.num1}}
			{{countInfo.num2}}
			{{countInfo.num3}}
			{{countInfo.num4}}
			{{countInfo.num5}}
			{{countInfo.num6}}
			{{countInfo.known}}
		</view> -->

        <view class="summary">
            <view class="item">
                <text class="count">
                    {{countInfo.todayStudyNum}}
                </text>
                <text class="title">
                    今日识词
                </text>
            </view>
            <view class="item">
                <text class="count">
                    {{countInfo.todayNeedReviewNum}}
                </text>
                <text class="title">
                    今日待复习
                </text>
            </view>
            <view class="item">
                <text class="count">
					{{countInfo.known}}
                </text>
                <text class="title">
                    累计识词
                </text>
            </view>

        </view>

        <view class="buttomRow">
            <button class="buttomLeft" type="warn" @click="startReview">开始学新</button>
            <button class="buttomRight" type="primary" @click="continueStudy">复习</button>
        </view>



    </view>
</template>

<script setup>
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import {ref} from "vue";
	
	import { useUserInfoStore } from '../../store';
	import { useStudyInfoStore } from '../../store';
	
	//获得store实例对象
	const userInfoStore = useUserInfoStore()
	//获得store实例对象
	const studyInfoStore = useStudyInfoStore()
	
	let isRefresh = false;
	
	let countInfo = ref({
		forget: 0,
		num1: 0,
		num2: 0,
		num3: 0,
		num4: 0,
		num5: 0,
		num6: 0,
		known: 0,
		todayStudyNum: 0,
		todayNeedReviewNum: 0
	})
	
	
	onLoad(async () => {
		await refreshCount()
		isRefresh = true;
	})
	
	onShow(async () => {
		studyInfoStore.clearStudyWordsList();
		if(isRefresh) {
			await refreshCount()
		}
		
	})
	
	//刷新统计数据
	async function refreshCount(){
		
		let res = undefined
		
		/// mark01
		if(userInfoStore.userInfo.role === 0) {
			res = await uniCloud.callFunction({
				name: "countWords",
				data: {
					relateUuid: userInfoStore.userInfo.uuid,
					wordBankId: studyInfoStore.wordBankId
				}
			})
		} else if(userInfoStore.userInfo.role === 1) {
			res = await uniCloud.callFunction({
				name: "countWords",
				data: {
					relateUuid: userInfoStore.selectedStudentInfo.uuid,
					wordBankId: studyInfoStore.wordBankId
				}
			})
		}
		
		console.log(res)
		
		if(res.result.code === 500){
			return
		} else {
			countInfo.value.forget = res.result.data.forget
			countInfo.value.num1 = res.result.data.num1
			countInfo.value.num2 = res.result.data.num2
			countInfo.value.num3 = res.result.data.num3
			countInfo.value.num4 = res.result.data.num4
			countInfo.value.num5 = res.result.data.num5
			countInfo.value.num6 = res.result.data.num6
			countInfo.value.known = res.result.data.known
			countInfo.value.todayStudyNum = res.result.data.todayStudyNum
			countInfo.value.todayNeedReviewNum = res.result.data.todayNeedReviewNum
		}


	}
	
    async function startReview() {
        console.log("学新");
		studyInfoStore.setStudyMode(0)
		
		if(userInfoStore.userInfo.role === 1) {
			const userInfoRes = await uniCloud.callFunction({
				name: 'getUserInfo',
				data: {
				  uuid: userInfoStore.selectedStudentInfo.uuid
				}
			});
			if(userInfoRes.result.data.studyNewTimes > 0) {
				uni.navigateTo({
				    url: "/pages/detection/detection"
				})
			} else {
				uni.showToast({
					icon:"error",
					title: "学新次数不足"
				})
			}
		} else {
			uni.navigateTo({
			    url: "/pages/detection/detection"
			})
		}
    }



    async function continueStudy() {
        console.log("复习"),
		studyInfoStore.setStudyMode(1)
		
		if(userInfoStore.userInfo.role === 1) {
			const userInfoRes = await uniCloud.callFunction({
				name: 'getUserInfo',
				data: {
				  uuid: userInfoStore.selectedStudentInfo.uuid
				}
			});
			if(userInfoRes.result.data.reviewTimes > 0) {
				uni.navigateTo({
				    url: "/pages/memorize-words/memorize-words"
				})
			} else {
				uni.showToast({
					icon:"error",
					title: "复习次数不足"
				})
			}
		} else {
			uni.navigateTo({
				url: "/pages/memorize-words/memorize-words"
			})
		}
		

    }
</script>

<style lang="scss" scoped>
    .container {
        font-size: 14px;
        line-height: 24px;
        background-color: #436582;
        height: 100vh;

        .statistics {
            // display: flex;
			// flex-direction: column;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-gap: 20rpx; /* 网格间隔 */
			padding: 20rpx 40rpx;
			.countItem{
				display: flex;
				flex-direction: column;
				background-color: #f6c72c;
				justify-content: center;
				align-items: center;
				padding: 20rpx 0;
				gap: 20rpx;
				.countCircle{
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: white;
					border-radius: 50%;
					height: 100rpx;
					width: 100rpx;
					font-size: 40rpx;
					font-weight: 600;
				}
				text{
					font-size: 40rpx;
					color: white;
					font-weight: 600;
				}
	 		}
			.countItem:nth-child(1) {
				background-color: #ff5252;
			}
			.countItem:nth-child(2) {
				background-color: #f69b2c;
			}
			.countItem:nth-child(3) {
				background-color: #ffac47;
			}
			.countItem:nth-child(4) {
				background-color: #ffb255;
			}
			.countItem:nth-child(5) {
				background-color: #fcbf57;
			}
			.countItem:nth-child(6) {
				background-color: #ffcf4a;
			}
			.countItem:nth-child(7) {
				background-color: #ffe14a;
			}
			.countItem:nth-child(8) {
				background-color: #40d463;
			}
        }

        .summary {
            padding: 0 20px;
            margin-top: 20px;
            display: flex;
            flex-direction: row;
            justify-content: space-around;

            .item {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 15rpx;

                .count {
                    color: #adcaea;
                    font-size: 30px;
                    font-weight: bold;
                }

                .title {
                    color: #7091b1;
                    font-size: 20px;
                }
            }
        }

        .buttomRow {
            padding: 0 20px;
            margin-top: 20px;
            display: flex;
            flex-direction: row;
            gap: 10rpx;

            .buttomLeft {
                width: 100%;
            }

            .buttomRight {
                width: 100%;
            }
        }
    }
</style>